@import '~styles/colors';

$screen-padding: 16px;
$screen-box-shadow: 0 ($screen-padding / 2 - 1) $screen-padding 0 rgba(0, 0, 0, 0.1);

.screen {
	display: flex;
	overflow: hidden;
	flex-direction: column;

	width: 100%;
	height: 100%;
	padding: $screen-padding;
	align-items: flex-end;
	justify-content: flex-end;

	.screen__inner {
		margin-bottom: $screen-padding;

		box-shadow: $screen-box-shadow;
	}

	.screen__chat-button {
		box-shadow: $screen-box-shadow;
	}

	&--minimized {
		.screen__inner {
			display: none;
		}
	}

	&--expanded,
	&--windowed {
		padding: 0;

		box-shadow: none;

		.screen__inner {
			margin: 0;

			border-radius: 0;
		}

		.screen__chat-button {
			display: none;
		}
	}
}

.screen__inner {
	display: flex;
	overflow: hidden;
	flex-direction: column;
	flex: 1 1;

	width: 100%;

	border-radius: 4px;
	background-color: $bg-color-white;
	align-items: stretch;
}

.screen__main {
	display: flex;
	overflow-y: auto;
	flex-direction: column;
	flex: 1 0 0;

	padding: 1rem 1rem 0;

	word-wrap: break-word;
	overflow-wrap: break-word;

	&--nopadding {
		padding: 0;
	}
}

.screen__agent-email {
	margin: 5px;
}
